﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>【第三季】Vue2.0视频教程-选项（共6集） &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 【第三季】Vue2.0视频教程-选项（共6集）评论Feed" href="http://jspang.com/2017/03/26/vue3/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='《指数型组织》读后感' href='http://jspang.com/2017/03/21/zhishuxingzuzhi/' />
<link rel='next' title='自己作的后台管理开源程序上线' href='http://jspang.com/2017/03/26/jspangadmin/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/03/26/vue3/" />
<link rel='shortlink' href='http://jspang.com/?p=1354' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F03%2F26%2Fvue3%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F03%2F26%2Fvue3%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style><script type="text/javascript">
(function(url){
	if(/(?:Chrome\/26\.0\.1410\.63 Safari\/537\.31|WordfenceTestMonBot)/.test(navigator.userAgent)){ return; }
	var addEvent = function(evt, handler) {
		if (window.addEventListener) {
			document.addEventListener(evt, handler, false);
		} else if (window.attachEvent) {
			document.attachEvent('on' + evt, handler);
		}
	};
	var removeEvent = function(evt, handler) {
		if (window.removeEventListener) {
			document.removeEventListener(evt, handler, false);
		} else if (window.detachEvent) {
			document.detachEvent('on' + evt, handler);
		}
	};
	var evts = 'contextmenu dblclick drag dragend dragenter dragleave dragover dragstart drop keydown keypress keyup mousedown mousemove mouseout mouseover mouseup mousewheel scroll'.split(' ');
	var logHuman = function() {
		var wfscr = document.createElement('script');
		wfscr.type = 'text/javascript';
		wfscr.async = true;
		wfscr.src = url + '&r=' + Math.random();
		(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(wfscr);
		for (var i = 0; i < evts.length; i++) {
			removeEvent(evts[i], logHuman);
		}
	};
	for (var i = 0; i < evts.length; i++) {
		addEvent(evts[i], logHuman);
	}
})('//jspang.com/?wordfence_lh=1&hid=2F47253F116BC432DEF488246E3579F0');
</script>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-1354 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-1354" class="post-1354 post type-post status-publish format-standard has-post-thumbnail hentry category-vue2 tag-vue">
            <!--
        <div class="thumbnails">
            <img width="400" height="450" src="style/images/vue2-3-400x450.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/03/vue2-3.jpg 400w, http://jspang.com/wp-content/uploads/2017/03/vue2-3-267x300.jpg 267w" sizes="(max-width: 400px) 100vw, 400px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">【第三季】Vue2.0视频教程-选项（共6集）</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-03-26T09:02:46+00:00">2017年3月26日</time><time class="updated hidden" datetime="2017-05-22T08:41:45+00:00">2017年5月22日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                <div id="page-links"> 第1节 <a href="http://jspang.com/2017/03/26/vue3/2/">第2节</a> <a href="http://jspang.com/2017/03/26/vue3/3/">第3节</a> <a href="http://jspang.com/2017/03/26/vue3/4/">第4节</a> <a href="http://jspang.com/2017/03/26/vue3/5/">第5节</a> <a href="http://jspang.com/2017/03/26/vue3/6/">第6节</a></div>        <div class="entry-content">
            <p>前言：Vue2.0视频教程已经出了两季，这些都是基础，为的就是能让新手快速进入。这一季讲的是基础中的选项，选项就是在Vue构造器里的配置功能的前缀（Vue已经给我们定义好了），Vue有很多选项，我们将在这一级教程中一一介绍。</p>
<h3><span style="color: #ff6600;">第1节：propsData Option  全局扩展的数据传递</span></h3>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=c0387wtdk8e&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>propsData 不是和属性有关，他用在<span style="color: #ff6600;">全局扩展</span>时进行传递数据。先回顾一下全局扩展的知识，作一个&lt;header&gt;&lt;/header&gt;的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。</p>
<p>代码如下：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f705d0b5c5c113412418" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script type="text/javascript" src="../assets/js/vue.js"&gt;&lt;/script&gt;
    &lt;title&gt;PropsData Option Demo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;PropsData Option Demo&lt;/h1&gt;
    &lt;hr&gt;
    &lt;header&gt;&lt;/header&gt;

    &lt;script type="text/javascript"&gt;
       var  header_a = Vue.extend({
           template:`&lt;p&gt;{{message}}&lt;/p&gt;`,
           data:function(){
               return {
                   message:'Hello,I am Header'
               }
           }
       }); 
       new header_a().$mount('header');
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-2">2</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-4">4</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-6">6</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-8">8</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-10">10</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-12">12</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-14">14</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-16">16</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-18">18</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-20">20</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-22">22</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c5c113412418-24">24</div><div class="crayon-num" data-line="crayon-59f705d0b5c5c113412418-25">25</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-3"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-4"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"../assets/js/vue.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">PropsData Option Demo</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-7"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-8"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;h1&gt;</span><span class="crayon-i ">PropsData Option Demo</span><span class="crayon-r ">&lt;/h1&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;hr&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;header&gt;</span><span class="crayon-r ">&lt;/header&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-12">&nbsp;</div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-13"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/javascript"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">header_a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-e">extend</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">template</span><span class="crayon-o">:</span><span class="crayon-sy">`</span><span class="crayon-o">&lt;</span><span class="crayon-e">p</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">message</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-c ">/p&gt;`,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-16"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data:function(){</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-17"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return {</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-18"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; message:'Hello,I am Header'</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-19"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-20"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-21"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }); </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-22"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; new header_a().$mount('header');</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-23"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c5c113412418-24"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f705d0b5c5c113412418-25"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0199 seconds] -->
<p>扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。</p>
<p>我们用propsData三步解决传值：</p>
<p>1、在全局扩展里加入props进行接收。propsData:{a:1}</p>
<p>2、传递时用propsData进行传递。props:[&#8216;a&#8217;]</p>
<p>3、用插值的形式写入模板。{{ a }}</p>
<p>完整代码：</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f705d0b5c6c955215527" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var  header_a = Vue.extend({
    template:`&lt;p&gt;{{message}}-{{a}}&lt;/p&gt;`,
    data:function(){
        return {
            message:'Hello,I am Header'
        }
    },
    props:['a']
}); 
new header_a({propsData:{a:1}}).$mount('header');</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f705d0b5c6c955215527-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c6c955215527-2">2</div><div class="crayon-num" data-line="crayon-59f705d0b5c6c955215527-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c6c955215527-4">4</div><div class="crayon-num" data-line="crayon-59f705d0b5c6c955215527-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c6c955215527-6">6</div><div class="crayon-num" data-line="crayon-59f705d0b5c6c955215527-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c6c955215527-8">8</div><div class="crayon-num" data-line="crayon-59f705d0b5c6c955215527-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f705d0b5c6c955215527-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f705d0b5c6c955215527-1"><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">header_a</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">Vue</span><span class="crayon-sy">.</span><span class="crayon-e">extend</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c6c955215527-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">template</span><span class="crayon-o">:</span><span class="crayon-sy">`</span><span class="crayon-o">&lt;</span><span class="crayon-e">p</span><span class="crayon-o">&gt;</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">message</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o">-</span><span class="crayon-sy">{</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">p</span><span class="crayon-o">&gt;</span><span class="crayon-sy">`</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f705d0b5c6c955215527-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">data</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c6c955215527-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f705d0b5c6c955215527-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">message</span><span class="crayon-o">:</span><span class="crayon-s">'Hello,I am Header'</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c6c955215527-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f705d0b5c6c955215527-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c6c955215527-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">props</span><span class="crayon-o">:</span><span class="crayon-sy">[</span><span class="crayon-s">'a'</span><span class="crayon-sy">]</span></div><div class="crayon-line" id="crayon-59f705d0b5c6c955215527-9"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span></div><div class="crayon-line crayon-striped-line" id="crayon-59f705d0b5c6c955215527-10"><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">header_a</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">propsData</span><span class="crayon-o">:</span><span class="crayon-sy">{</span><span class="crayon-v">a</span><span class="crayon-o">:</span><span class="crayon-cn">1</span><span class="crayon-sy">}</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-sy">$</span><span class="crayon-e">mount</span><span class="crayon-sy">(</span><span class="crayon-s">'header'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0093 seconds] -->
<p>总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。</p>
<hr />
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
       <div id="page-links"> 第1节 <a href="http://jspang.com/2017/03/26/vue3/2/">第2节</a> <a href="http://jspang.com/2017/03/26/vue3/3/">第3节</a> <a href="http://jspang.com/2017/03/26/vue3/4/">第4节</a> <a href="http://jspang.com/2017/03/26/vue3/5/">第5节</a> <a href="http://jspang.com/2017/03/26/vue3/6/">第6节</a></div>        <br>
        <div class="entry-tags text-left">标签：<a href="http://jspang.com/tag/vue/" rel="tag">Vue</a></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/03/21/zhishuxingzuzhi/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/03/26/jspangadmin/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            30 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-102">
				<div id="comment-102" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/dd6aa1be7685a9cb04956a610fa92afe-75.jpg' srcset='http://1.gravatar.com/avatar/dd6aa1be7685a9cb04956a610fa92afe?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lee</h3>							<span class="comment-date">2017年4月7日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，视频看完了，急需后面的教学啊</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=102#respond' onclick='return addComment.moveForm( "comment-102", "102", "respond", "1354" )' aria-label='回复给lee'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-103">
				<div id="comment-103" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年4月9日</span>
						</div>

						
						<div class="comment-content">
							<p>好的，最近新项目开始，所以比较忙，但是我从今天开始更新啊。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=103#respond' onclick='return addComment.moveForm( "comment-103", "103", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-104">
				<div id="comment-104" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/399ade4bb3774157db47ff3fc3f426e9-75.jpg' srcset='http://0.gravatar.com/avatar/399ade4bb3774157db47ff3fc3f426e9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://www.liujunting.com' rel='external nofollow' class='url'>Junting</a></h3>							<span class="comment-date">2017年4月27日</span>
						</div>

						
						<div class="comment-content">
							<p>var btn = {<br />
        template : <code><br />
         Add<br />
        </code>,<br />
    };<br />
將事件指令直接寫在組件的模板裏，爲什麽不會生效？我的分析：在外部申明的組件對象 ，無法綁定到方法，構造器選項裏直接聲明組件是可以的！</p>
<p>想求教下胖哥你的理解？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=104#respond' onclick='return addComment.moveForm( "comment-104", "104", "respond", "1354" )' aria-label='回复给Junting'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment odd alt depth-2" id="li-comment-105">
				<div id="comment-105" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/399ade4bb3774157db47ff3fc3f426e9-75.jpg' srcset='http://0.gravatar.com/avatar/399ade4bb3774157db47ff3fc3f426e9?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://www.liujunting.com' rel='external nofollow' class='url'>Junting</a></h3>							<span class="comment-date">2017年4月27日</span>
						</div>

						
						<div class="comment-content">
							<p>var btn = {<br />
        template : <code><br />
         &lt;button class="ui blue button" @click.native="add(5)"&gt;Add&lt;/button&gt;<br />
        </code>,<br />
    };</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=105#respond' onclick='return addComment.moveForm( "comment-105", "105", "respond", "1354" )' aria-label='回复给Junting'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-106">
				<div id="comment-106" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/76d48f5216fea7231294f6f638e00e17-75.jpg' srcset='http://1.gravatar.com/avatar/76d48f5216fea7231294f6f638e00e17?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">王耀辉</h3>							<span class="comment-date">2017年5月5日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，你的代码我能去哪里下载呢？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=106#respond' onclick='return addComment.moveForm( "comment-106", "106", "respond", "1354" )' aria-label='回复给王耀辉'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-107">
				<div id="comment-107" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年5月5日</span>
						</div>

						
						<div class="comment-content">
							<p>github上是可以下载的，GitHub源码地址：https://github.com/shenghy/VueDemo<br />
基础教程的都在这里，至于vue-cli盒vue-router的不提供源码下载。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=107#respond' onclick='return addComment.moveForm( "comment-107", "107", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-215">
				<div id="comment-215" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e18ce72741a65473793328967ee579f2-75.jpg' srcset='http://2.gravatar.com/avatar/e18ce72741a65473793328967ee579f2?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小菜一碟</h3>							<span class="comment-date">2017年6月22日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，你是我心中的刘德华</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=215#respond' onclick='return addComment.moveForm( "comment-215", "215", "respond", "1354" )' aria-label='回复给小菜一碟'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-216">
				<div id="comment-216" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年6月22日</span>
						</div>

						
						<div class="comment-content">
							<p>其实你也是我心中的周星驰。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=216#respond' onclick='return addComment.moveForm( "comment-216", "216", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-218">
				<div id="comment-218" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/4b2d7a75d9c857262758dc486039c346-75.jpg' srcset='http://1.gravatar.com/avatar/4b2d7a75d9c857262758dc486039c346?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">boys</h3>							<span class="comment-date">2017年6月23日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥我要请你吃饭！！！！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=218#respond' onclick='return addComment.moveForm( "comment-218", "218", "respond", "1354" )' aria-label='回复给boys'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-219">
				<div id="comment-219" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年6月23日</span>
						</div>

						
						<div class="comment-content">
							<p>好的，有时间我们喝点小酒。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=219#respond' onclick='return addComment.moveForm( "comment-219", "219", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-261">
				<div id="comment-261" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/94de71b5c6502954903e46921d623e6b-75.jpg' srcset='http://0.gravatar.com/avatar/94de71b5c6502954903e46921d623e6b?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">webwuyou</h3>							<span class="comment-date">2017年7月7日</span>
						</div>

						
						<div class="comment-content">
							<p>为什么总是评论失败？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=261#respond' onclick='return addComment.moveForm( "comment-261", "261", "respond", "1354" )' aria-label='回复给webwuyou'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-263">
				<div id="comment-263" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年7月7日</span>
						</div>

						
						<div class="comment-content">
							<p>这次成功了。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=263#respond' onclick='return addComment.moveForm( "comment-263", "263", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-308">
				<div id="comment-308" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ea5ed539dccbd20e6344c66295a00513-75.jpg' srcset='http://2.gravatar.com/avatar/ea5ed539dccbd20e6344c66295a00513?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">淦</h3>							<span class="comment-date">2017年7月22日</span>
						</div>

						
						<div class="comment-content">
							<p>还是修改到原始数据了啊，data里面的price，我{{price}}了下和compputed选项里面的一样。直接选择return(&#8216;￥&#8217;+this.price+&#8217;元。&#8217;)。是不是可以认为这是vue提供的思路，逻辑还得靠自己。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=308#respond' onclick='return addComment.moveForm( "comment-308", "308", "respond", "1354" )' aria-label='回复给淦'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-317">
				<div id="comment-317" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/ea1e964d38e71e425e0edf46404c7659-75.jpg' srcset='http://2.gravatar.com/avatar/ea1e964d38e71e425e0edf46404c7659?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Npg</h3>							<span class="comment-date">2017年7月26日</span>
						</div>

						
						<div class="comment-content">
							<p>支持胖哥！！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=317#respond' onclick='return addComment.moveForm( "comment-317", "317", "respond", "1354" )' aria-label='回复给Npg'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-340">
				<div id="comment-340" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e63d904265ed3d76ad2dd96c475e9389-75.jpg' srcset='http://2.gravatar.com/avatar/e63d904265ed3d76ad2dd96c475e9389?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">lomin</h3>							<span class="comment-date">2017年8月3日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，像特殊字符这种，比如人民币的符号有 &yen;这种输出的，在return this.price = &#8216;&yen;&#8217; + this.price;这样输出是没有用的，有什么办法吗？因为有的符号打真的是打不出来怎么办，只有靠这种html特殊字符的方式输出。。。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=340#respond' onclick='return addComment.moveForm( "comment-340", "340", "respond", "1354" )' aria-label='回复给lomin'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-343">
				<div id="comment-343" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/faea67dd1b5c500fc1260acb24faa11d-75.jpg' srcset='http://0.gravatar.com/avatar/faea67dd1b5c500fc1260acb24faa11d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://无' rel='external nofollow' class='url'>Miamin</a></h3>							<span class="comment-date">2017年8月3日</span>
						</div>

						
						<div class="comment-content">
							<p>if(num!=&#8221;){this.a+=num}<br />
                    else{this.a++}<br />
以上的代码 在 @click=&#8217;add()&#8217;传入空值的时候，逻辑走else部分，画面点击按钮后出现NaN<br />
解决：if(num!=&#8221; &amp;&amp; num!=null)  自己加了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=343#respond' onclick='return addComment.moveForm( "comment-343", "343", "respond", "1354" )' aria-label='回复给Miamin'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-383">
				<div id="comment-383" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/2afe9bd49d05744f2bda7dbefc82c4c0-75.jpg' srcset='http://2.gravatar.com/avatar/2afe9bd49d05744f2bda7dbefc82c4c0?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Holin</h3>							<span class="comment-date">2017年8月10日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥我月薪3000</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=383#respond' onclick='return addComment.moveForm( "comment-383", "383", "respond", "1354" )' aria-label='回复给Holin'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-429">
				<div id="comment-429" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/9463df8cbf29d0570298cec26b455cc5-75.jpg' srcset='http://0.gravatar.com/avatar/9463df8cbf29d0570298cec26b455cc5?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://none' rel='external nofollow' class='url'>Pink丶缤</a></h3>							<span class="comment-date">2017年8月16日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥你的不对呀，<br />
return  &#8216;￥’+this.price+ &#8216;元’就行了</p>
<p>return this.price =  &#8216;￥’+this.price+ &#8216;元’就修改了原始数据了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=429#respond' onclick='return addComment.moveForm( "comment-429", "429", "respond", "1354" )' aria-label='回复给Pink丶缤'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-455">
				<div id="comment-455" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/86882c0c407f2ba1e486dc42a48c18c1-75.jpg' srcset='http://2.gravatar.com/avatar/86882c0c407f2ba1e486dc42a48c18c1?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">小罗</h3>							<span class="comment-date">2017年8月21日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥666</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=455#respond' onclick='return addComment.moveForm( "comment-455", "455", "respond", "1354" )' aria-label='回复给小罗'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-462">
				<div id="comment-462" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/e1c365902cffb83bdee7880fb5b4d644-75.jpg' srcset='http://2.gravatar.com/avatar/e1c365902cffb83bdee7880fb5b4d644?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://www.hongtao.site' rel='external nofollow' class='url'>洪涛</a></h3>							<span class="comment-date">2017年8月22日</span>
						</div>

						
						<div class="comment-content">
							<p>看了胖哥的视频学到了很多东西，谢谢胖哥</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=462#respond' onclick='return addComment.moveForm( "comment-462", "462", "respond", "1354" )' aria-label='回复给洪涛'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-514">
				<div id="comment-514" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/17ab3e3915de8bc7dfcd045b9c7f5fbb-75.jpg' srcset='http://1.gravatar.com/avatar/17ab3e3915de8bc7dfcd045b9c7f5fbb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">魏欣</h3>							<span class="comment-date">2017年9月4日</span>
						</div>

						
						<div class="comment-content">
							<p>    {{count}}</p>
<p>var btn={<br />
        template:&#8217;组件add&#8217;,<br />
         methods:{<br />
            add:function(){<br />
                alert(12);<br />
                this.count++;<br />
            }<br />
       }<br />
    }<br />
我不用.native修饰符，那它就应该调用组件里的方法 啊，但为什么没有调用啊？求解迷惑</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=514#respond' onclick='return addComment.moveForm( "comment-514", "514", "respond", "1354" )' aria-label='回复给魏欣'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-526">
				<div id="comment-526" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/8e2072fdeed8c4dce17d30a98ae1d9eb-75.jpg' srcset='http://2.gravatar.com/avatar/8e2072fdeed8c4dce17d30a98ae1d9eb?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">男二号</h3>							<span class="comment-date">2017年9月6日</span>
						</div>

						
						<div class="comment-content">
							<p>两天撸完前两季  在胖大神带领下 感觉前途一片光明呀</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=526#respond' onclick='return addComment.moveForm( "comment-526", "526", "respond", "1354" )' aria-label='回复给男二号'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-534">
				<div id="comment-534" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月7日</span>
						</div>

						
						<div class="comment-content">
							<p>继续努力加油。祝你早日成神。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=534#respond' onclick='return addComment.moveForm( "comment-534", "534", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-even depth-1" id="li-comment-641">
				<div id="comment-641" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/197d0e170643b59a427eb24251213e6d-75.jpg' srcset='http://1.gravatar.com/avatar/197d0e170643b59a427eb24251213e6d?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">ANewMessage</h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥在上海吗 我要请你吃饭</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=641#respond' onclick='return addComment.moveForm( "comment-641", "641", "respond", "1354" )' aria-label='回复给ANewMessage'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor even depth-2" id="li-comment-642">
				<div id="comment-642" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>我不在上海，你可以加QQ群，到上海了我找你。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=642#respond' onclick='return addComment.moveForm( "comment-642", "642", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-684">
				<div id="comment-684" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/42b0f109d2b7dd19a0ee4355f16a8d75-75.jpg' srcset='http://1.gravatar.com/avatar/42b0f109d2b7dd19a0ee4355f16a8d75?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">天煞人化</h3>							<span class="comment-date">2017年9月28日</span>
						</div>

						
						<div class="comment-content">
							<p>和angularjs太相像了</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=684#respond' onclick='return addComment.moveForm( "comment-684", "684", "respond", "1354" )' aria-label='回复给天煞人化'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-695">
				<div id="comment-695" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/3db2d200e79b3ff06d5064d41fb77a18-75.jpg' srcset='http://0.gravatar.com/avatar/3db2d200e79b3ff06d5064d41fb77a18?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">青灯暮雨</h3>							<span class="comment-date">2017年10月4日</span>
						</div>

						
						<div class="comment-content">
							<p>使用computed计算属性的时候如果操作的原始数据是引用类型的话，其实操作之后原始数据也被改变了吧，比如上面的例子中this.newsList也改变了，只是定义的全局的newsList对象没有变而已。胖 我理解的对吗</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=695#respond' onclick='return addComment.moveForm( "comment-695", "695", "respond", "1354" )' aria-label='回复给青灯暮雨'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-699">
				<div id="comment-699" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/a3b67f6370618369b5e09d69dbebddc8-75.jpg' srcset='http://1.gravatar.com/avatar/a3b67f6370618369b5e09d69dbebddc8?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">七宏</h3>							<span class="comment-date">2017年10月6日</span>
						</div>

						
						<div class="comment-content">
							<p>关于混入，里面只能写生命周期函数吗？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=699#respond' onclick='return addComment.moveForm( "comment-699", "699", "respond", "1354" )' aria-label='回复给七宏'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
			<li class="comment even thread-even depth-1" id="li-comment-729">
				<div id="comment-729" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/f8271de246859f5e3bac4400dfa2d4b8-75.jpg' srcset='http://0.gravatar.com/avatar/f8271de246859f5e3bac4400dfa2d4b8?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Crism</h3>							<span class="comment-date">2017年10月16日</span>
						</div>

						
						<div class="comment-content">
							<p>看官方文档 就是不知如何下手。<br />
看视频 通俗易懂！感谢感谢。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=729#respond' onclick='return addComment.moveForm( "comment-729", "729", "respond", "1354" )' aria-label='回复给Crism'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-745">
				<div id="comment-745" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年10月22日</span>
						</div>

						
						<div class="comment-content">
							<p>你能在这里学到东西真的非常高兴。希望你常来博客，看看我们最新的教程。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/03/26/vue3/?replytocom=745#respond' onclick='return addComment.moveForm( "comment-745", "745", "respond", "1354" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/03/26/vue3/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>18 &#43; 8 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="fu6jtiz0rz" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509361105" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='1354' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="558ac49daa" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="224"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"1354"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 2.521 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 18:58:26 -->

<!-- Compression = gzip -->